<div ngCombobox #combobox="ngCombobox" [readonly]="true">
  <div class="combobox-input-container">
    <input ngComboboxInput placeholder="Select a country..." [value]="value()" />
    <span class="material-symbols-outlined icon arrow-icon" translate="no">arrow_drop_down</span>
  </div>

  <ng-template ngComboboxPopupContainer>
    <dialog ngComboboxDialog class="dialog">
      <div ngCombobox #combobox="ngCombobox" filterMode="manual" [alwaysExpanded]="true">
        <div class="combobox-input-container">
          <span class="material-symbols-outlined icon search-icon" translate="no">search</span>
          <input
            ngComboboxInput
            class="combobox-input"
            placeholder="Search..."
            [(value)]="searchString"
          />
        </div>

        <ng-template ngComboboxPopupContainer>
          @if (options().length === 0) {
            <div class="no-results">No results found</div>
          }

          <div ngListbox [(values)]="selectedCountries">
            @for (option of options(); track option) {
              <div ngOption [value]="option" [label]="option">
                <span class="option-label">{{option}}</span>
                <span class="material-symbols-outlined icon check-icon" translate="no">check</span>
              </div>
            }
          </div>
        </ng-template>
      </div>
    </dialog>
  </ng-template>
</div>
